<template>
	<div class="login-container">
		<div class="center">
			<div class="center-left">
				<div class="title" style="margin-left: 9.5rem; margin-top: 6.8125rem;">
					<p>Hi! 你好！</p>
					<p>欢迎使用UNIVERSE MANAGER SYSTEM</p>
				</div>
			</div>
			<div class="center-right">
				<el-form ref="loginForm" :model="loginForm" :rules="loginRules"  autocomplete="on"
					label-position="left">
					<div class="title" style="margin-top:114px;margin-left: 3.375rem;">
						登录系统
					</div>
					<div style="margin-top: 50px;margin-left: 3.375rem;color: white;font-size: 22px;">
						系统账号/手机号
					</div>
					<div>
						<input class="custom-input" ref="username" style="margin-top: 14px;"
							v-model="loginForm.username" name="username" type="text" tabindex="1" autocomplete="on" />
					</div>
					<div style="margin-top: 30px;margin-left: 3.375rem;color: white;font-size: 22px;">
						密码
					</div>
					<div>
						<input class="custom-input" :key="passwordType" ref="password" v-model="loginForm.password"
							style="margin-top: 14px;" name="username" :type="passwordType" tabindex="1" autocomplete="on" />
					</div>
					<div style="margin-left: 3.375rem;font-size: 16px;color: white;margin-top: 50px;">
						<div style="float: left;width: 50%;">
							<el-checkbox v-model="remember"> <span style="color: white;">记住密码</span></el-checkbox>
						</div>
						<div style="float: right;width: 20%;">
							忘记密码
						</div>
					</div>
					<div style="width: 484px;margin-top: 100px;margin-left: 3.375rem;">
						<el-button :loading="loading" type="primary" style="width: 481px;height: 62px;font-size: 22px;"
							@click.native.prevent="handleLogin">登录</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		validUsername
	} from '@/utils/validate'
	import SocialSign from './components/SocialSignin'
	import Cookies from 'js-cookie'

	export default {
		name: 'Login',
		components: {
			SocialSign
		},
		data() {

			const validateUsername = (rule, value, callback) => {
				callback()
			}
			const validatePassword = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error('The password can not be less than 6 digits'))
				} else {
					callback()
				}
			}
			return {
				remember: true,
				loginForm: {
					username: '',
					password: ''
				},
				loginRules: {
					username: [{
						required: true,
						trigger: 'blur',
						validator: validateUsername
					}],
					password: [{
						required: true,
						trigger: 'blur',
						validator: validatePassword
					}]
				},
				passwordType: 'password',
				capsTooltip: false,
				loading: false,
				showDialog: false,
				redirect: undefined,
				otherQuery: {}
			}
		},
		watch: {
			$route: {
				handler: function(route) {
					const query = route.query
					if (query) {
						this.redirect = query.redirect
						this.otherQuery = this.getOtherQuery(query)
					}
				},
				immediate: true
			}
		},
		created() {
			this.loginForm.username = Cookies.get("loginName");
			this.loginForm.password = Cookies.get("loginPassword");
		},
		mounted() {
			if (this.loginForm.username === '') {
				this.$refs.username.focus()
			} else if (this.loginForm.password === '') {
				this.$refs.password.focus()
			}
		},
		destroyed() {
			// window.removeEventListener('storage', this.afterQRScan)
		},
		methods: {
			checkCapslock(e) {
				const {
					key
				} = e
				this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
			},
			showPwd() {
				if (this.passwordType === 'password') {
					this.passwordType = ''
				} else {
					this.passwordType = 'password'
				}
				this.$nextTick(() => {
					this.$refs.password.focus()
				})
			},
			handleLogin() {
				var _this = this;

				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.loading = true
						this.$store.dispatch('user/login', this.loginForm)
							.then(() => {
								Cookies.set("loginName", _this.loginForm.username);
								Cookies.set("loginPassword", _this.loginForm.password);
								this.$router.push({
									path: this.redirect || '/',
									query: this.otherQuery
								})
								this.loading = false
							})
							.catch(() => {
								this.loading = false
							})
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			getOtherQuery(query) {
				return Object.keys(query).reduce((acc, cur) => {
					if (cur !== 'redirect') {
						acc[cur] = query[cur]
					}
					return acc
				}, {})
			}
		}
	}
</script>

<style lang="scss">
	$bg:#283443;
	$light_gray:#fff;
	$cursor: #fff;

	/* reset element-ui css */
	.login-container {
		.title {
			color: white;
			font-size: 30px;
			font-weight: 200;
		}

		.custom-input {
			text-indent: 15px;
			width: 484px;
			height: 65px;
			margin-left: 3.375rem;
			border-radius: 10px;
			border: white solid 1px;
			outline: none;
			font-size: 20px;
			color: rgb(164, 171, 198);
			line-height: 60px;
		}

		.center {
			border-radius: 30px;
			border: 1px solid white;
			margin: 15vh auto;
			width: 1399px;
			height: 70vh;
			filter: alpha(Opacity=50);
			background: rgba(white, 0.1);

			.center-left {
				float: left;
				height: 100%;
				height: 100%;
			}

			.center-right {
				border-top-right-radius: 30px;
				border-bottom-right-radius: 30px;
				background-color: rgba(93, 172, 250, 1);
				width: 590px;
				height: 100%;
				float: right;
			}
		}

	}
</style>

<style lang="scss" scoped>
	$bg:#2d3a4b;
	$dark_gray:#889aa4;
	$light_gray:#eee;

	.login-container {
		min-height: 100%;
		width: 100%;
		background-color: $bg;
		background-size: 100% 100%;
		background: url('/login.png') no-repeat;
		overflow: hidden;



		@media only screen and (max-width: 470px) {
			.thirdparty-button {
				display: none;
			}
		}
	}
</style>
